<template>
  <div>
      <div class="model">
          <div class="model-header">
              <div class="h-year">
                  <UrlNav v-if="countryStatus" />
                  <span class="select">
                      <select name="" id="" v-model="selectYear">
                          <option value="2020">2020</option>
                          <option value="2019">2019</option>
                          <option value="2018">2018</option>
                      </select>
                  </span>
              </div>
              <div class="h-info">
                  <div class="info">
                      <p>生产企业:{{enterpriseData.parkTotal}}家</p>
                      <p>集团占比:{{enterpriseData.percentage}}</p>
                  </div>
                  <div class="info">
                      <p>注册产品:{{productData.parkTotal}}件</p>
                      <p>集团占比:{{productData.percentage}}</p>
                  </div>
              </div>
          </div>
          <img class="img-panel" :src="imgUrl" alt="">
      </div>
  </div>
</template>
<script>
// import china from '../static/json/province/shanghai.json'

import UrlNav from '@/components/urlNav'
import { getEnterprisePark, getProductPark } from '@/api/park.js'
let tipTime

export default {
    name: 'EchartsMap',
    data() {
        return {
            echart: '',
            step: this.$store.getters.step,
            path: this.$route.path,
            selectYear: this.$store.getters.year || '2020',
            enterpriseData: 0,
            productData: 0,
            countryStatus: false
        }
    },
    computed: {
        parkName() {
            return this.$store.getters.parkName
        },
        imgUrl() {
            return require(`@/static/images/${this.parkName}.jpg`)
        }
    },
    components: {
        UrlNav
    },
    mounted() {
        this.countryStatus = true
        this.$store.dispatch('app/setYear', this.selectYear);
    },
    methods: {
        async getProvinceInitList(year) {
            this.enterpriseData = await getEnterprisePark({
                year: this.selectYear,
                parkName: this.parkName
            })
            this.productData = await getProductPark({
                year: this.selectYear,
                parkName: this.parkName
            })
        },
    },
    watch: {
        selectYear: {
            handler: function (nVal, oVal) {
                this.getProvinceInitList(nVal)
                // this.getCountryCount(nVal)
                this.$store.dispatch("app/setYear", nVal);
            },
            immediate: true
        }
    },
    destroyed() {
        clearInterval(tipTime)
    }
}
</script>
<style scoped lang="scss">
.model {
    height: 31.7vw;
    position: relative;

    #china_map {
        padding: 5.4vw 0 0 0;
        width: 100%;
        height: 30vw;
    }

}

.model-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;

    .h-year {
        text-align: center;

        .select {
            position: relative;
            vertical-align: middle;

            select {
                appearance: none;
                font-size: screenVw(1);
                background: #000;
                color: #fff;
                border: 0;
                padding: .2vw 1.4vw .2vw .6vw;
            }

            &::before {
                content: "";
                position: absolute;
                top: 50%;
                right: .3vw;
                transform: translate(0, -50%);
                border-right: .4vw solid transparent;
                border-left: .4vw solid transparent;
                border-top: .4vw solid #fff;
            }
        }
    }
}

.img-panel {
    width: 36vw;
    height: 24.5vw;
    margin-top: 6vw;
}

.h-info {
    margin: screenVw(.4) 0 0 0;
    display: flex;

    .info {
        flex: 1;
        color: #78dffd;
        font-size: screenVw(1);
        font-weight: bold;
    }

    .info:first-child {

    }

    .info:last-child {
        text-align: right;
    }
}
</style>
